<template>
  <div>
    <div class="header">
      <div class="header-box" :style="{backgroundColor: themeColor}">
        <img class="header-logo" :src="logo" alt="">
      </div>
    </div>
    <el-carousel :autoplay="false" indicator-position="none" :height="imageHeight + 'px'" ref="carousel">
      <el-carousel-item v-for="(item, index) in bannerImageList" :key="index">
        <img class="banner-image" :src="item" alt="">
      </el-carousel-item>
    </el-carousel>
    <tab @tabClick="handleTabClick"></tab>
    <dacco-category v-if="currentTabIndex === 0" @itemClick="handleCategoryItemClick"
                    @productItemClick="handleProductItemClick" :categoryList="categoryList" :productList="productList" :scrollHeight="scrollHeight"
                    :currentCategoryIndex="currentCategoryIndex"></dacco-category>
    <dacco-nurse v-if="currentTabIndex === 1" :tipsList="tipsList" :scrollHeight="scrollHeight" @itemClick="handleTipsItemClick" :themeColor="themeColor"></dacco-nurse>
    <dacco-brand v-if="currentTabIndex === 2" :detail="detail"></dacco-brand>
  </div>
</template>

<script>
import tab from 'components/Tab'
import daccoCategory from './components/Category'
import daccoNurse from './components/Nurse'
import daccoBrand from './components/Brand'
import Brand from '@/model/brand'
import Product from '@/model/product'

export default {
  name: 'Dacco',
  components: {
    tab,
    daccoCategory,
    daccoNurse,
    daccoBrand
  },
  data () {
    return {
      imageHeight: 0,
      currentTabIndex: 0,
      categoryList: [],
      bannerImageList: [],
      tipsList: [],
      detail: null,
      themeColor: '',
      logo: '',
      productList: [],
      currentCategoryIndex: 0,
      scrollHeight: window.innerHeight - 300
    }
  },
  async created () {
    const params = this.$route.params
    await this.getBrandDetail(params.id)
    this._imgLoad()
    window.addEventListener('resize', () => {
      this._imgLoad()
    })
  },
  methods: {
    async getBrandDetail (id) {
      const res = await Brand.getBrandDetail(id)
      this.themeColor = res.theme_color
      this.logo = res.white_logo
      this.bannerImageList = res.banner_image_list
      this.categoryList = res.category_list
      this.tips = res.tips
      this.tipsList = res.tips_list
      this.detail = res.detail
      this.productList = res.category_list[0].product_list
      document.title = res.name_en + '电子手册'
    },
    async getCategoryProducts (id) {
      this.productList = await Product.getProductsByCategory(id)
    },
    handleTabClick (option) {
      this.currentTabIndex = option.index
      this.$refs.carousel.setActiveItem(option.index)
    },
    async handleCategoryItemClick (option) {
      this.currentCategoryIndex = option.index
      await this.getCategoryProducts(option.id)
    },
    handleProductItemClick (option) {
      this.$router.push('/product/' + option.id)
    },
    handleTipsItemClick (option) {
      this.$router.push('/tips/' + option.id)
    },
    _getImgAttr (url, callback) {
      const img = new Image()
      img.src = url
      if (img.complete) {
        callback(img.width, img.height)
      } else {
        img.onload = function () {
          callback(img.width, img.height)
          img.onload = null
        }
      }
    },
    _imgLoad () {
      this.$nextTick(() => {
        if (this.bannerImageList.length) {
          this._getImgAttr(this.bannerImageList[0], (width, height) => {
            const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            this.imageHeight = height / width * screenWidth
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.header {
  height: 100px;
  line-height: 100px;
}

.header-logo {
  width: 160px;
  margin-left: 20px;
}

.banner-image {
  width: 100%;
}
</style>
